<template>

    <v-card>
      <v-toolbar class="elevation-0">
         <v-btn color='primary' v-if="authorize.add" v-show="tableShow" @click="addRole">新增角色</v-btn>
         <v-btn color='primary' v-show="treeShow" @click="saveAuthorize">保存角色权限</v-btn>
         <v-btn color='primary' v-show="treeShow" @click="returnRoleList">返回</v-btn>
      </v-toolbar>
      <v-divider/>

      <v-data-table
          :headers="headers"
          :items="lists"
          hide-actions
          class="elevation-0"
          v-show="tableShow"
          :loading="loading"
          v-if="authorize.page"
          >
          <template slot="items" slot-scope="props">
              <td class="text-xs-center">{{ props.item.id }}</td>
              <td class="text-xs-center">{{ props.item.roleCode }}</td>
              <td class="text-xs-center">{{ props.item.remark }}</td>
              <td class="text-xs-center">{{ props.item.createDate }}</td>
              <td class="justify-center layout px-0">
                <v-btn v-show="authorize.edit" icon @click="editRole(props.item)">
                    <i class="el-icon-edit"/>
                </v-btn>
                <v-btn icon v-show="authorize.delete" v-if="props.item.isDelete"  @click="deleteRole(props.item)">恢复</v-btn>
                <v-btn icon v-show="authorize.delete" v-else @click="deleteRole(props.item)">删除</v-btn>
                <v-btn v-show="authorize.allocation" @click="setAuthorize(props.item.id)">设置权限</v-btn>
              </td>
          </template>
      </v-data-table>

      <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          ref="tree"
          v-show="treeShow"
          default-expand-all
          >
      </el-tree>

      <v-dialog v-model="show" max-width="350px" persistent scrollable>
          <v-card>
              <!--对话框的标题-->
                <v-toolbar dense dark color="primary">
                <v-toolbar-title>{{isEdit ? '修改' : '新增'}}角色</v-toolbar-title>
                <v-spacer/>
                <!--关闭窗口的按钮-->
                <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
              </v-toolbar>
              <v-card-text class="xs10 mx-auto" style="height: 300px">
                    <v-text-field v-model="oldRole.roleCode" label="角色码：" />
                    <v-text-field v-model="oldRole.remark" label="描述：" :counter="200" multi-line :rows="3" hide-details />
              </v-card-text>
              <v-card-actions>
                  <v-spacer/>
                  <v-btn color="blue darken-1" flat @click.native="show=false">取消</v-btn>
                  <v-btn color="blue darken-1" flat @click.native="save">保存</v-btn>
              </v-card-actions>
          </v-card>
      </v-dialog>
    </v-card>
</template>
<script>

import {Tree} from 'element-ui'

export default {
  name: "role",
  components: {
        elTree: Tree
   },
  data() {
    return {
      headers: [
        { text: "id", value: "id", align: "center", sortable: false },
        { text: "角色码", value: "roleCode",align: "center",sortable: false},
        { text: "描述", value: "remark", align: "center", sortable: false },
        { text: "创建时间", value: "createDate", align: "center", sortable: false },
        { text: "操作", align: "center", sortable: false }
      ],
      lists: [], // 角色数据
      show: false, //控制弹框的显示
      tableShow:true, //控制表格显示
      treeShow:false,  //控制tree显示
      isEdit: false,
      oldRole:{}, //即将被编辑的角色
      loading: true, // 是否在加载中
      data: [], // tree数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      roleId:null,
      authorize:{page:false,add:false,edit:false,delete:false,allocation:false}
    };
  },
  mounted() { // 渲染后执行
    // 查询数据
    this.getDataFromServer();
  },
  created(){
    this.$http({
      method: 'GET',
      url: '/user/author/query/other/auth?url='+this.$route.path,
      headers: {"x-authorize-token":this.$storeGet("L_TOKEN")},
    }).then((resp) => {
      if(resp.data.code == 1){
        resp.data.data.forEach(m => {
          if(m.url == '/user/author/role/all' && m.method == "GET"){
            this.authorize.page=true;
          }
          if(m.url == "/user/author/role" && m.method == "POST"){
            this.authorize.add=true;
          }
          if(m.url == "/user/author/role" && m.method == "PUT"){
            this.authorize.edit=true;
          }
          if(m.url == "/user/author/role" && m.method == "DELETE"){
            this.authorize.delete=true;
          }
          if(m.url == "/user/author/allocation" && m.method == "PUT"){
            this.authorize.allocation=true;
          }
        })
      }else{
        this.$message.error(resp.data.message);
      }
    }).catch(() => {
      this.$message.error("服务器异常");
    });
  },
   mounted() { // 渲染后执行
     // 查询数据
     this.loadData();
     this.$http.get('/user/author/permission/all',{headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}}).then( resp => {
       if(resp.data.code == 1){
         this.data = resp.data.data;
       }else{
         this.$message.error(resp.data.message);
       }
     }).catch(() => {
       this.$message.error("服务器异常");
     });
   },
  methods: {
    loadData() {
      this.$http.get('/user/author/role/all',{headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}}).then( resp => {
        if(resp.data.code == 1){
          this.lists = resp.data.data;
          this.loading = false;
        }else{
          this.$message.error(resp.data.message);
        }
      }).catch(() => {
        this.$message.error("服务器异常");
      });
    },
    editRole(role) {
      this.isEdit = true;
      this.show = true;
      this.oldRole = {id:role.id,roleCode:role.roleCode,remark:role.remark};
    },
    addRole() {
      this.isEdit = false;
      this.show = true;
      this.oldRole={roleCode:"",remark:""};
    },
    save(){
      this.$http({
          method: this.isEdit ? 'put' : 'post',
          url: '/user/author/role',
          data: this.oldRole,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
      }).then((resp) => {
          if(resp.data.code == 1){
            // 关闭窗口
            this.show = false;
            this.$message.success("保存成功！");
            this.loadData();
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
    },
    deleteRole(role) {
        this.$http({
            method: 'delete',
            url: '/user/author/role',
            data: {id:role.id,isDelete:role.isDelete},
            headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then((resp) => {
            if(resp.data.code == 1){
              this.$message.success(role.isDelete?"恢复成功":"删除成功");
              this.loadData();
            }else{
              this.$message.error(resp.data.message);
            }
          }).catch(() => {
            this.$message.error("服务器异常");
          });
    },
    closeWindow(){
       // 关闭窗口
       this.show = false;
     },
    setAuthorize(id){
        this.$http({
            method: 'get',
            url: '/user/author/query/permission/'+id,
            headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then((resp) => {
            if(resp.data.code == 1){
              this.treeShow = true;
              this.tableShow = false;
              this.roleId=id;
              this.$refs.tree.setCheckedKeys(resp.data.data,false);
            }else{
              this.$message.error(resp.data.message);
            }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
    },
    saveAuthorize(){
        let data = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
        this.$http({
            method: 'put',
            url: '/user/author/allocation',
            data:{id:this.roleId,pids:data},
            headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then((resp) => {
            if(resp.data.code == 1){
              this.$message.success("权限保存成功！");
            }else{
              this.$message.error(resp.data.message);
            }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
    },
     returnRoleList(){
        this.treeShow = false;
        this.tableShow = true;
    }
  }
};
</script>
